Package-level declarations
Types
Link copied to clipboard
Placement of a StylishPopover relative to its trigger anchor.
Link copied to clipboard
data class StylishAccordionItem(val title: String, val content: @Composable () -> Unit, val enabled: Boolean = true)
One collapsible section of a StylishAccordion.
Link copied to clipboard
Visual variants of a StylishAlert.
Link copied to clipboard
Data class representing a single avatar in a StylishConnectedAvatarRow.
Link copied to clipboard
data class StylishBreadcrumbItem(val label: String, val onClick: () -> Unit? = null, val icon: @Composable () -> Unit? = null)
One entry of a StylishBreadcrumb navigation trail.
Link copied to clipboard
The Finish-layer alias for the headless connected-card rendering contract.
Link copied to clipboard
One label/value pair of a StylishDescriptions.
Link copied to clipboard
Visual variants of a StylishResult status page.
Link copied to clipboard
Layout direction of a StylishSplitter.
Link copied to clipboard
data class StylishTimelineItem(val title: String, val description: String = "", val timestamp: String = "")
One entry of a StylishTimeline.
Link copied to clipboard
data class StylishToastData(val message: String, val variant: StylishToastVariant = StylishToastVariant.Normal, val durationMillis: Long = 3000, val actionLabel: String? = null, val onAction: () -> Unit? = null)
A single toast entry managed by StylishToastHostState.
Link copied to clipboard
class StylishToastHostState
State holder for a stack of toasts displayed by StylishToastHost.
Link copied to clipboard
Visual variants of a toast shown by StylishToastHost.
Properties
Link copied to clipboard
The default date formatter used by StylishDatePickerField, producing yyyy/MM/dd output (e.g. 2026/07/25).
Link copied to clipboard
Whether this dismiss state has settled into a dismissed value (either SwipeToDismissBoxValue.StartToEnd or SwipeToDismissBoxValue.EndToStart).
Functions
Link copied to clipboard
fun DefaultStylishConnectedButton(item: StylishConnectedButtonItem, modifier: Modifier, shape: Shape, outlineEdges: ConnectedEdges, outlineCorners: ConnectedCorners, cornerRadius: Dp, contentPadding: PaddingValues, defaultColors: ButtonColors, slotMinWidth: Dp = 24.dp)
The default button renderer used by connected-button layouts when no custom ConnectedButtonItemContent is supplied.
Link copied to clipboard
fun DefaultStylishConnectedCardItem(item: StylishConnectedCardItem, modifier: Modifier, shape: Shape, outlineEdges: ConnectedEdges, outlineCorners: ConnectedCorners, containerColor: Color? = null, contentColor: Color? = null, disabledContainerColor: Color = MaterialTheme.colorScheme.surfaceVariant, disabledContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, titleStyle: TextStyle = MaterialTheme.typography.titleLarge, supportingTextStyle: TextStyle = MaterialTheme.typography.bodySmall, titleMaxLines: Int = 1, titleOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextMaxLines: Int = 1, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, minHeight: Dp = DefaultStylishDimensions.cardMinHeight, horizontalPadding: Dp = DefaultStylishDimensions.controlPadding, verticalPadding: Dp = DefaultStylishDimensions.controlVerticalPadding, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, titleSpacing: Dp = StylishTheme.dimensions.inlineSpacing)
The default card renderer used by connected-card layouts when no custom StylishConnectedCardItemContent is supplied.
Link copied to clipboard
fun DefaultStylishConnectedChip(item: StylishConnectedChipItem, modifier: Modifier, shape: Shape, outlineEdges: ConnectedEdges, outlineCorners: ConnectedCorners, labelMaxLines: Int, labelOverflow: TextOverflow, labelStyle: TextStyle, selectedContainerColor: Color, selectedContentColor: Color, unselectedContainerColor: Color, unselectedContentColor: Color, contentPadding: PaddingValues, contentSpacing: Dp, interactionSource: MutableInteractionSource? = null)
The default chip renderer used by connected-chip layouts when no custom ConnectedChipItemContent is supplied.
Link copied to clipboard
fun DefaultStylishConnectedListItem(item: StylishConnectedListItem, modifier: Modifier, shape: Shape, outlineEdges: ConnectedEdges, outlineCorners: ConnectedCorners, headlineMaxLines: Int, headlineOverflow: TextOverflow, headlineStyle: TextStyle, supportingTextMaxLines: Int, supportingTextOverflow: TextOverflow, supportingTextStyle: TextStyle, containerColor: Color?, contentColor: Color?, horizontalPadding: Dp, verticalPadding: Dp, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, interactionSource: MutableInteractionSource? = null)
The default list-item renderer used by connected-list layouts when no custom ConnectedListItemContent is supplied.
Link copied to clipboard
fun rememberStylishDateRangePickerState(initialSelectedStartDateMillis: Long? = null, initialSelectedEndDateMillis: Long? = null, initialDisplayedMonthMillis: Long? = initialSelectedStartDateMillis, yearRange: IntRange = DatePickerDefaults.YearRange, initialDisplayMode: DisplayMode = DisplayMode.Picker, selectableDates: SelectableDates = DatePickerDefaults.AllDates): DateRangePickerState
Creates and remembers a DateRangePickerState for use with StylishDateRangePicker.
Link copied to clipboard
fun rememberStylishDismissState(initialValue: SwipeToDismissBoxValue = SwipeToDismissBoxValue.Settled, positionalThreshold: (totalDistance: Float) -> Float = SwipeToDismissBoxDefaults.positionalThreshold): SwipeToDismissBoxState
Convenience alias for rememberStylishSwipeToDismissBoxState with a shorter name. Returns a SwipeToDismissBoxState whose settle animation is configured with StylishTheme.animation tokens.
Link copied to clipboard
fun rememberStylishSwipeToDismissBoxState(initialValue: SwipeToDismissBoxValue = SwipeToDismissBoxValue.Settled, positionalThreshold: (totalDistance: Float) -> Float = SwipeToDismissBoxDefaults.positionalThreshold): SwipeToDismissBoxState
Creates and remembers a SwipeToDismissBoxState for use with StylishSwipeToDismissBox.
Link copied to clipboard
Creates and remembers a StylishToastHostState.
Link copied to clipboard
fun StylishAccordion(items: List<StylishAccordionItem>, modifier: Modifier = Modifier, expandedIndex: Int? = null, onExpandedChange: (Int?) -> Unit? = null, spacing: Dp = StylishTheme.dimensions.connectedSpacing, shape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius), containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, contentColor: Color = MaterialTheme.colorScheme.onSurface, titleStyle: TextStyle = MaterialTheme.typography.titleMedium, titleMaxLines: Int = 1, titleOverflow: TextOverflow = TextOverflow.Ellipsis, enabled: Boolean = true)
A vertically stacked set of collapsible sections — the web "accordion" pattern from shadcn/ui, MUI, and Chakra UI.
Link copied to clipboard
fun StylishAlert(message: String, modifier: Modifier = Modifier, variant: StylishAlertVariant = StylishAlertVariant.Info, title: String? = null, onDismiss: () -> Unit? = null, action: @Composable () -> Unit? = null, containerColor: Color? = null, contentColor: Color? = null, shape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius), icon: @Composable () -> Unit? = null)
An inline alert/banner — the web "Alert" pattern from Ant Design, Chakra UI, and MUI.
Link copied to clipboard
fun StylishAutocomplete(value: String, onValueChange: (String) -> Unit, options: List<String>, modifier: Modifier = Modifier, label: String = "", placeholder: String = "", onOptionSelect: (String) -> Unit? = null, match: (String, String) -> Boolean = { query, option ->
option.contains(query, ignoreCase = true)
}, maxSuggestions: Int = 6, enabled: Boolean = true, isError: Boolean = false, errorMessage: String? = null, shape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius), width: Dp = 320.dp)
A text field with a filtered suggestion dropdown — the web "AutoComplete" pattern from Ant Design and MUI.
Link copied to clipboard
fun StylishAvatarGroup(count: Int, modifier: Modifier = Modifier, size: Dp = 32.dp, overlap: Dp = 12.dp, ringColor: Color = MaterialTheme.colorScheme.surface, avatar: @Composable (index: Int) -> Unit = { index ->
Text(
"U$index",
style = MaterialTheme.typography.labelSmall,
color = MaterialTheme.colorScheme.onPrimaryContainer,
)
})
A stacked avatar group — the web "Avatar.Group/AvatarGroup" pattern from Ant Design and MUI.
Link copied to clipboard
fun StylishBreadcrumb(items: List<StylishBreadcrumbItem>, modifier: Modifier = Modifier, separator: @Composable () -> Unit = {
Icon(
Icons.Default.KeyboardArrowRight,
contentDescription = null,
modifier = Modifier.size(18.dp),
tint = MaterialTheme.colorScheme.onSurfaceVariant,
)
}, maxItems: Int = Int.MAX_VALUE, textStyle: TextStyle = MaterialTheme.typography.bodyMedium, color: Color = MaterialTheme.colorScheme.onSurfaceVariant, activeColor: Color = MaterialTheme.colorScheme.onSurface)
A navigation trail showing the current location in a hierarchy — the web "Breadcrumb" pattern from shadcn/ui, MUI, and Ant Design.
Link copied to clipboard
fun StylishCarousel(itemCount: () -> Int, preferredItemWidth: Dp, state: CarouselState = rememberCarouselState(itemCount = itemCount), modifier: Modifier = Modifier, itemSpacing: Dp = 0.dp, flingBehavior: TargetedFlingBehavior = CarouselDefaults.singleAdvanceFlingBehavior(state = state), userScrollEnabled: Boolean = true, minSmallItemWidth: Dp = CarouselDefaults.MinSmallItemSize, maxSmallItemWidth: Dp = CarouselDefaults.MaxSmallItemSize, contentPadding: PaddingValues = PaddingValues(0.dp), content: @Composable CarouselItemScope.(index: Int) -> Unit)
A horizontally scrolling carousel that centers a focal item and shows smaller sibling items on both sides (multi-browse layout).
Link copied to clipboard
fun StylishConnectedAvatarRow(items: List<StylishAvatarItem>, modifier: Modifier = Modifier, maxVisible: Int = 5, size: Dp = 40.dp, overlap: Dp = (-8).dp, containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, contentColor: Color = MaterialTheme.colorScheme.onSurface, border: BorderStroke = BorderStroke(2.dp, MaterialTheme.colorScheme.surface), overflowContainerColor: Color = MaterialTheme.colorScheme.primaryContainer, overflowContentColor: Color = MaterialTheme.colorScheme.onPrimaryContainer)
A horizontally overlapping row of circular avatars with an optional "+N" overflow indicator, suited for showing team members, commenters, or collaborators.
Link copied to clipboard
fun StylishConnectedButtonColumn(items: List<StylishConnectedButtonItem>, modifier: Modifier = Modifier, cornerRadius: Dp = StylishTheme.dimensions.connectedCornerRadius, spacing: Dp = StylishTheme.dimensions.connectedSpacing, contentPadding: PaddingValues = PaddingValues(horizontal = 16.dp, vertical = 12.dp), defaultColors: ButtonColors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.stylishComponentColors.groupedContainer,
contentColor = MaterialTheme.colorScheme.onSurface,
disabledContainerColor = MaterialTheme.colorScheme.surfaceVariant,
disabledContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
), button: ConnectedButtonItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedButton(
item, itemModifier, shape, edges, corners, cornerRadius, contentPadding, defaultColors,
slotMinWidth = 40.dp,
)
})
A vertically connected group of buttons that share outlines and corner radii to form a segmented-control appearance.
Link copied to clipboard
fun StylishConnectedButtonGrid(items: List<StylishConnectedButtonItem>, columns: Int, modifier: Modifier = Modifier, cornerRadius: Dp = StylishTheme.dimensions.connectedCornerRadius, spacing: Dp = StylishTheme.dimensions.connectedSpacing, contentPadding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 12.dp), defaultColors: ButtonColors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.stylishComponentColors.groupedContainer,
contentColor = MaterialTheme.colorScheme.onSurface,
disabledContainerColor = MaterialTheme.colorScheme.surfaceVariant,
disabledContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
), button: ConnectedButtonItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedButton(
item, itemModifier, shape, edges, corners, cornerRadius, contentPadding, defaultColors,
)
})
A grid of connected buttons laid out in equal-width cells across a fixed number of columns, with shared outlines and corner radii.
Link copied to clipboard
fun StylishConnectedButtonRow(items: List<StylishConnectedButtonItem>, modifier: Modifier = Modifier, cornerRadius: Dp = StylishTheme.dimensions.connectedCornerRadius, spacing: Dp = StylishTheme.dimensions.connectedSpacing, contentPadding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 12.dp), defaultColors: ButtonColors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.stylishComponentColors.groupedContainer,
contentColor = MaterialTheme.colorScheme.onSurface,
disabledContainerColor = MaterialTheme.colorScheme.surfaceVariant,
disabledContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
), button: ConnectedButtonItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedButton(
item, itemModifier, shape, edges, corners, cornerRadius, contentPadding, defaultColors,
)
})
A horizontally connected group of buttons that share outlines and corner radii to form a segmented-control appearance.
Link copied to clipboard
fun StylishConnectedCardColumn(items: List<StylishConnectedCardItem>, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, containerColor: Color? = null, contentColor: Color? = null, disabledContainerColor: Color = MaterialTheme.colorScheme.surfaceVariant, disabledContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, titleStyle: TextStyle = MaterialTheme.typography.titleLarge, supportingTextStyle: TextStyle = MaterialTheme.typography.bodySmall, titleMaxLines: Int = 1, titleOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextMaxLines: Int = 1, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, minHeight: Dp = DefaultStylishDimensions.cardMinHeight, horizontalPadding: Dp = DefaultStylishDimensions.controlPadding, verticalPadding: Dp = DefaultStylishDimensions.controlVerticalPadding, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, titleSpacing: Dp = StylishTheme.dimensions.inlineSpacing, card: StylishConnectedCardItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedCardItem(
item, itemModifier, shape, edges, corners,
containerColor = containerColor,
contentColor = contentColor,
disabledContainerColor = disabledContainerColor,
disabledContentColor = disabledContentColor,
titleStyle = titleStyle,
supportingTextStyle = supportingTextStyle,
titleMaxLines = titleMaxLines,
titleOverflow = titleOverflow,
supportingTextMaxLines = supportingTextMaxLines,
supportingTextOverflow = supportingTextOverflow,
minHeight = minHeight,
horizontalPadding = horizontalPadding,
verticalPadding = verticalPadding,
contentSpacing = contentSpacing,
titleSpacing = titleSpacing,
)
})
A vertically connected group of cards that share outlines and corner radii, typically used for grouped settings sections or stacked informational cards.
Link copied to clipboard
fun StylishConnectedCardGrid(items: List<StylishConnectedCardItem>, columns: Int, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, containerColor: Color? = null, contentColor: Color? = null, disabledContainerColor: Color = MaterialTheme.colorScheme.surfaceVariant, disabledContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, titleStyle: TextStyle = MaterialTheme.typography.titleLarge, supportingTextStyle: TextStyle = MaterialTheme.typography.bodySmall, titleMaxLines: Int = 1, titleOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextMaxLines: Int = 1, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, minHeight: Dp = DefaultStylishDimensions.cardMinHeight, horizontalPadding: Dp = DefaultStylishDimensions.controlPadding, verticalPadding: Dp = DefaultStylishDimensions.controlVerticalPadding, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, titleSpacing: Dp = StylishTheme.dimensions.inlineSpacing, card: StylishConnectedCardItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedCardItem(
item, itemModifier, shape, edges, corners,
containerColor = containerColor,
contentColor = contentColor,
disabledContainerColor = disabledContainerColor,
disabledContentColor = disabledContentColor,
titleStyle = titleStyle,
supportingTextStyle = supportingTextStyle,
titleMaxLines = titleMaxLines,
titleOverflow = titleOverflow,
supportingTextMaxLines = supportingTextMaxLines,
supportingTextOverflow = supportingTextOverflow,
minHeight = minHeight,
horizontalPadding = horizontalPadding,
verticalPadding = verticalPadding,
contentSpacing = contentSpacing,
titleSpacing = titleSpacing,
)
})
A grid of connected cards laid out in equal-width cells across a fixed number of columns, with shared outlines and corner radii — suited for statistics dashboards or tile galleries.
Link copied to clipboard
fun StylishConnectedCardLazyColumn(items: List<StylishConnectedCardItem>, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, contentPadding: PaddingValues = PaddingValues(horizontal = DefaultStylishDimensions.controlPadding), listState: LazyListState = rememberLazyListState(), containerColor: Color? = null, contentColor: Color? = null, disabledContainerColor: Color = MaterialTheme.colorScheme.surfaceVariant, disabledContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, titleStyle: TextStyle = MaterialTheme.typography.titleLarge, supportingTextStyle: TextStyle = MaterialTheme.typography.bodySmall, titleMaxLines: Int = 1, titleOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextMaxLines: Int = 1, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, minHeight: Dp = DefaultStylishDimensions.cardMinHeight, horizontalPadding: Dp = DefaultStylishDimensions.controlPadding, verticalPadding: Dp = DefaultStylishDimensions.controlVerticalPadding, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, titleSpacing: Dp = StylishTheme.dimensions.inlineSpacing, card: StylishConnectedCardItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedCardItem(
item, itemModifier, shape, edges, corners,
containerColor = containerColor,
contentColor = contentColor,
disabledContainerColor = disabledContainerColor,
disabledContentColor = disabledContentColor,
titleStyle = titleStyle,
supportingTextStyle = supportingTextStyle,
titleMaxLines = titleMaxLines,
titleOverflow = titleOverflow,
supportingTextMaxLines = supportingTextMaxLines,
supportingTextOverflow = supportingTextOverflow,
minHeight = minHeight,
horizontalPadding = horizontalPadding,
verticalPadding = verticalPadding,
contentSpacing = contentSpacing,
titleSpacing = titleSpacing,
)
})
A lazily-composed vertical group of connected cards that share outlines and corner radii, suited for long scrollable card lists.
Link copied to clipboard
fun StylishConnectedCardLazyGrid(items: List<StylishConnectedCardItem>, columns: Int, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, contentPadding: PaddingValues = PaddingValues(horizontal = DefaultStylishDimensions.controlPadding), listState: LazyGridState = rememberLazyGridState(), containerColor: Color? = null, contentColor: Color? = null, disabledContainerColor: Color = MaterialTheme.colorScheme.surfaceVariant, disabledContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, titleStyle: TextStyle = MaterialTheme.typography.titleLarge, supportingTextStyle: TextStyle = MaterialTheme.typography.bodySmall, titleMaxLines: Int = 1, titleOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextMaxLines: Int = 1, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, minHeight: Dp = DefaultStylishDimensions.cardMinHeight, horizontalPadding: Dp = DefaultStylishDimensions.controlPadding, verticalPadding: Dp = DefaultStylishDimensions.controlVerticalPadding, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, titleSpacing: Dp = StylishTheme.dimensions.inlineSpacing, card: StylishConnectedCardItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedCardItem(
item, itemModifier, shape, edges, corners,
containerColor = containerColor,
contentColor = contentColor,
disabledContainerColor = disabledContainerColor,
disabledContentColor = disabledContentColor,
titleStyle = titleStyle,
supportingTextStyle = supportingTextStyle,
titleMaxLines = titleMaxLines,
titleOverflow = titleOverflow,
supportingTextMaxLines = supportingTextMaxLines,
supportingTextOverflow = supportingTextOverflow,
minHeight = minHeight,
horizontalPadding = horizontalPadding,
verticalPadding = verticalPadding,
contentSpacing = contentSpacing,
titleSpacing = titleSpacing,
)
})
A lazily-composed grid of connected cards laid out in equal-width cells across a fixed number of columns, with shared outlines and corner radii — suited for scrollable statistics dashboards or tile galleries.
Link copied to clipboard
fun StylishConnectedCardRow(items: List<StylishConnectedCardItem>, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, containerColor: Color? = null, contentColor: Color? = null, disabledContainerColor: Color = MaterialTheme.colorScheme.surfaceVariant, disabledContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, titleStyle: TextStyle = MaterialTheme.typography.titleLarge, supportingTextStyle: TextStyle = MaterialTheme.typography.bodySmall, titleMaxLines: Int = 1, titleOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextMaxLines: Int = 1, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, minHeight: Dp = DefaultStylishDimensions.cardMinHeight, horizontalPadding: Dp = DefaultStylishDimensions.controlPadding, verticalPadding: Dp = DefaultStylishDimensions.controlVerticalPadding, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, titleSpacing: Dp = StylishTheme.dimensions.inlineSpacing, card: StylishConnectedCardItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedCardItem(
item, itemModifier, shape, edges, corners,
containerColor = containerColor,
contentColor = contentColor,
disabledContainerColor = disabledContainerColor,
disabledContentColor = disabledContentColor,
titleStyle = titleStyle,
supportingTextStyle = supportingTextStyle,
titleMaxLines = titleMaxLines,
titleOverflow = titleOverflow,
supportingTextMaxLines = supportingTextMaxLines,
supportingTextOverflow = supportingTextOverflow,
minHeight = minHeight,
horizontalPadding = horizontalPadding,
verticalPadding = verticalPadding,
contentSpacing = contentSpacing,
titleSpacing = titleSpacing,
)
})
A horizontally connected group of cards that share outlines and corner radii, typically used for side-by-side numeric summaries or KPI tiles.
Link copied to clipboard
fun StylishConnectedChipColumn(items: List<StylishConnectedChipItem>, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, labelMaxLines: Int = 1, labelOverflow: TextOverflow = TextOverflow.Ellipsis, labelStyle: TextStyle = MaterialTheme.typography.labelLarge, selectedContainerColor: Color = MaterialTheme.colorScheme.primary, selectedContentColor: Color = MaterialTheme.colorScheme.onPrimary, unselectedContainerColor: Color = MaterialTheme.stylishComponentColors.groupedContainer, unselectedContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, contentPadding: PaddingValues = PaddingValues(horizontal = 14.dp, vertical = 10.dp), contentSpacing: Dp = 6.dp, interactionSource: MutableInteractionSource? = null, chip: ConnectedChipItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedChip(
item, itemModifier, shape, edges, corners, labelMaxLines, labelOverflow, labelStyle,
selectedContainerColor, selectedContentColor, unselectedContainerColor,
unselectedContentColor, contentPadding, contentSpacing,
interactionSource = interactionSource,
)
})
A vertically connected column of selectable chips with animated selection-state color transitions, suited for sidebar filters or vertically stacked category selectors.
Link copied to clipboard
fun StylishConnectedChipGrid(items: List<StylishConnectedChipItem>, columns: Int, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, labelMaxLines: Int = 1, labelOverflow: TextOverflow = TextOverflow.Ellipsis, labelStyle: TextStyle = MaterialTheme.typography.labelLarge, selectedContainerColor: Color = MaterialTheme.colorScheme.primary, selectedContentColor: Color = MaterialTheme.colorScheme.onPrimary, unselectedContainerColor: Color = MaterialTheme.stylishComponentColors.groupedContainer, unselectedContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, contentPadding: PaddingValues = PaddingValues(horizontal = 14.dp, vertical = 10.dp), contentSpacing: Dp = 6.dp, interactionSource: MutableInteractionSource? = null, chip: ConnectedChipItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedChip(
item, itemModifier, shape, edges, corners, labelMaxLines, labelOverflow, labelStyle,
selectedContainerColor, selectedContentColor, unselectedContainerColor,
unselectedContentColor, contentPadding, contentSpacing,
interactionSource = interactionSource,
)
})
A grid of connected selectable chips laid out in equal-width cells across a fixed number of columns, with animated selection-state color transitions — suited for tag clouds, category pickers, or multi-select filter grids.
Link copied to clipboard
fun StylishConnectedChipRow(items: List<StylishConnectedChipItem>, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, fillWidth: Boolean = false, labelMaxLines: Int = 1, labelOverflow: TextOverflow = TextOverflow.Ellipsis, labelStyle: TextStyle = MaterialTheme.typography.labelLarge, selectedContainerColor: Color = MaterialTheme.colorScheme.primary, selectedContentColor: Color = MaterialTheme.colorScheme.onPrimary, unselectedContainerColor: Color = MaterialTheme.stylishComponentColors.groupedContainer, unselectedContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, contentPadding: PaddingValues = PaddingValues(horizontal = 14.dp, vertical = 10.dp), contentSpacing: Dp = 6.dp, interactionSource: MutableInteractionSource? = null, chip: ConnectedChipItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedChip(
item, itemModifier, shape, edges, corners, labelMaxLines, labelOverflow, labelStyle,
selectedContainerColor, selectedContentColor, unselectedContainerColor,
unselectedContentColor, contentPadding, contentSpacing,
interactionSource = interactionSource,
)
})
A horizontally connected row of selectable chips with animated selection-state color transitions, suited for category filters or tab-like selectors.
Link copied to clipboard
fun StylishConnectedListItemColumn(items: List<StylishConnectedListItem>, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, headlineMaxLines: Int = Int.MAX_VALUE, headlineOverflow: TextOverflow = TextOverflow.Ellipsis, headlineStyle: TextStyle = MaterialTheme.typography.titleMedium, supportingTextMaxLines: Int = Int.MAX_VALUE, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextStyle: TextStyle = MaterialTheme.typography.bodyMedium, containerColor: Color? = null, contentColor: Color? = null, horizontalPadding: Dp = 16.dp, verticalPadding: Dp = 14.dp, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, interactionSource: MutableInteractionSource? = null, listItem: ConnectedListItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedListItem(
item, itemModifier, shape, edges, corners, headlineMaxLines, headlineOverflow,
headlineStyle, supportingTextMaxLines, supportingTextOverflow, supportingTextStyle,
containerColor, contentColor, horizontalPadding, verticalPadding, contentSpacing,
interactionSource = interactionSource,
)
})
A vertically connected group of list items that share outlines and corner radii, typically used for grouped settings sections or navigation menus.
Link copied to clipboard
fun StylishConnectedListItemGrid(items: List<StylishConnectedListItem>, columns: Int, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, headlineMaxLines: Int = Int.MAX_VALUE, headlineOverflow: TextOverflow = TextOverflow.Ellipsis, headlineStyle: TextStyle = MaterialTheme.typography.titleMedium, supportingTextMaxLines: Int = Int.MAX_VALUE, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextStyle: TextStyle = MaterialTheme.typography.bodyMedium, containerColor: Color? = null, contentColor: Color? = null, horizontalPadding: Dp = 16.dp, verticalPadding: Dp = 14.dp, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, interactionSource: MutableInteractionSource? = null, listItem: ConnectedListItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedListItem(
item, itemModifier, shape, edges, corners, headlineMaxLines, headlineOverflow,
headlineStyle, supportingTextMaxLines, supportingTextOverflow, supportingTextStyle,
containerColor, contentColor, horizontalPadding, verticalPadding, contentSpacing,
interactionSource = interactionSource,
)
})
A grid of connected list items laid out in equal-width cells across a fixed number of columns, with shared outlines and corner radii — suited for settings dashboards or grouped navigation tiles.
Link copied to clipboard
fun StylishConnectedListItemLazyColumn(items: List<StylishConnectedListItem>, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, contentPadding: PaddingValues = PaddingValues(horizontal = DefaultStylishDimensions.controlPadding), listState: LazyListState = rememberLazyListState(), headlineMaxLines: Int = Int.MAX_VALUE, headlineOverflow: TextOverflow = TextOverflow.Ellipsis, headlineStyle: TextStyle = MaterialTheme.typography.titleMedium, supportingTextMaxLines: Int = Int.MAX_VALUE, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextStyle: TextStyle = MaterialTheme.typography.bodyMedium, containerColor: Color? = null, contentColor: Color? = null, horizontalPadding: Dp = 16.dp, verticalPadding: Dp = 14.dp, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, interactionSource: MutableInteractionSource? = null, listItem: ConnectedListItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedListItem(
item, itemModifier, shape, edges, corners, headlineMaxLines, headlineOverflow,
headlineStyle, supportingTextMaxLines, supportingTextOverflow, supportingTextStyle,
containerColor, contentColor, horizontalPadding, verticalPadding, contentSpacing,
interactionSource = interactionSource,
)
})
A lazily-composed vertical group of connected list items that share outlines and corner radii, typically used for long grouped settings sections or navigation menus.
Link copied to clipboard
fun StylishConnectedListItemLazyGrid(items: List<StylishConnectedListItem>, columns: Int, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, contentPadding: PaddingValues = PaddingValues(horizontal = DefaultStylishDimensions.controlPadding), listState: LazyGridState = rememberLazyGridState(), headlineMaxLines: Int = Int.MAX_VALUE, headlineOverflow: TextOverflow = TextOverflow.Ellipsis, headlineStyle: TextStyle = MaterialTheme.typography.titleMedium, supportingTextMaxLines: Int = Int.MAX_VALUE, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextStyle: TextStyle = MaterialTheme.typography.bodyMedium, containerColor: Color? = null, contentColor: Color? = null, horizontalPadding: Dp = 16.dp, verticalPadding: Dp = 14.dp, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, interactionSource: MutableInteractionSource? = null, listItem: ConnectedListItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedListItem(
item, itemModifier, shape, edges, corners, headlineMaxLines, headlineOverflow,
headlineStyle, supportingTextMaxLines, supportingTextOverflow, supportingTextStyle,
containerColor, contentColor, horizontalPadding, verticalPadding, contentSpacing,
interactionSource = interactionSource,
)
})
A lazily-composed grid of connected list items laid out in equal-width cells across a fixed number of columns, with shared outlines and corner radii — suited for scrollable settings dashboards or grouped navigation tiles.
Link copied to clipboard
fun StylishConnectedListItemRow(items: List<StylishConnectedListItem>, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.connectedSpacing, headlineMaxLines: Int = Int.MAX_VALUE, headlineOverflow: TextOverflow = TextOverflow.Ellipsis, headlineStyle: TextStyle = MaterialTheme.typography.titleMedium, supportingTextMaxLines: Int = Int.MAX_VALUE, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextStyle: TextStyle = MaterialTheme.typography.bodyMedium, containerColor: Color? = null, contentColor: Color? = null, horizontalPadding: Dp = 16.dp, verticalPadding: Dp = 14.dp, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, interactionSource: MutableInteractionSource? = null, listItem: ConnectedListItemContent = { item, itemModifier, shape, edges, corners ->
DefaultStylishConnectedListItem(
item, itemModifier, shape, edges, corners, headlineMaxLines, headlineOverflow,
headlineStyle, supportingTextMaxLines, supportingTextOverflow, supportingTextStyle,
containerColor, contentColor, horizontalPadding, verticalPadding, contentSpacing,
interactionSource = interactionSource,
)
})
A horizontally connected group of list items that share outlines and corner radii, typically used for side-by-side summary tiles or horizontal navigation sections.
Link copied to clipboard
fun StylishConnectedToggleRow(items: List<String>, selectedIndex: Int?, onSelectedChange: (Int) -> Unit, modifier: Modifier = Modifier, cornerRadius: Dp = StylishTheme.dimensions.connectedCornerRadius, spacing: Dp = StylishTheme.dimensions.connectedSpacing, contentPadding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 12.dp), selectedContainerColor: Color = MaterialTheme.colorScheme.primaryContainer, selectedContentColor: Color = MaterialTheme.colorScheme.onPrimaryContainer, unselectedContainerColor: Color = MaterialTheme.stylishComponentColors.groupedContainer, unselectedContentColor: Color = MaterialTheme.colorScheme.onSurface)
A horizontally connected row of toggle buttons for mutually exclusive selection among a small set of string-labeled options.
Link copied to clipboard
fun StylishDatePickerField(value: LocalDate?, onValueChange: (LocalDate?) -> Unit, label: String, confirmLabel: String, dismissLabel: String, placeholder: String, modifier: Modifier = Modifier, formatter: (LocalDate) -> String = defaultDateFormatter, enabled: Boolean = true, isError: Boolean = false, supportingText: String? = null, yearRange: IntRange = DatePickerDefaults.YearRange, initialDisplayMode: DisplayMode = DisplayMode.Picker, showModeToggle: Boolean = false, selectableDates: SelectableDates = DatePickerDefaults.AllDates, labelContent: @Composable () -> Unit? = null, placeholderContent: @Composable () -> Unit? = null, confirmLabelContent: @Composable () -> Unit? = null, dismissLabelContent: @Composable () -> Unit? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null)
A date-input field that opens a Material 3 DatePickerDialog when tapped, displaying the selected date as formatted text in an OutlinedTextField.
Link copied to clipboard
fun StylishDateRangePicker(state: DateRangePickerState, modifier: Modifier = Modifier, dateFormatter: DatePickerFormatter = remember { DatePickerDefaults.dateFormatter() }, colors: DatePickerColors = DatePickerDefaults.colors(), title: @Composable () -> Unit? = {
DateRangePickerDefaults.DateRangePickerTitle(
displayMode = state.displayMode,
modifier = Modifier.padding(StylishDateRangePickerTitlePadding),
contentColor = colors.titleContentColor,
)
}, headline: @Composable () -> Unit? = {
DateRangePickerDefaults.DateRangePickerHeadline(
selectedStartDateMillis = state.selectedStartDateMillis,
selectedEndDateMillis = state.selectedEndDateMillis,
displayMode = state.displayMode,
dateFormatter = dateFormatter,
modifier = Modifier.padding(StylishDateRangePickerHeadlinePadding),
contentColor = colors.headlineContentColor,
)
}, showModeToggle: Boolean = true, focusRequester: FocusRequester? = remember { FocusRequester() })
A calendar-based date range picker for selecting a start and end date, rendered with the active theme's Material 3 DatePickerColors.
Link copied to clipboard
fun StylishDescriptions(items: List<StylishDescriptionItem>, modifier: Modifier = Modifier, columns: Int = 2, labelStyle: TextStyle = MaterialTheme.typography.labelSmall, valueStyle: TextStyle = MaterialTheme.typography.bodyMedium, labelColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, valueColor: Color = MaterialTheme.colorScheme.onSurface, containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, shape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius), cellPadding: PaddingValues = androidx.compose.foundation.layout.PaddingValues(horizontal = 16.dp, vertical = 12.dp))
A label/value detail grid — the web "Descriptions" pattern from Ant Design.
Link copied to clipboard
fun StylishEditable(value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, onCommit: (String) -> Unit? = null, textStyle: TextStyle = MaterialTheme.typography.bodyLarge, editShape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius), singleLine: Boolean = true)
An inline-editable text row — the web "Editable" pattern from Chakra UI.
Link copied to clipboard
fun StylishEmptyState(icon: ImageVector? = null, title: String, description: String, modifier: Modifier = Modifier, actionLabel: String? = null, onAction: () -> Unit? = null, titleMaxLines: Int = Int.MAX_VALUE, titleOverflow: TextOverflow = TextOverflow.Ellipsis, titleStyle: TextStyle = MaterialTheme.typography.headlineMedium, descriptionMaxLines: Int = Int.MAX_VALUE, descriptionOverflow: TextOverflow = TextOverflow.Ellipsis, descriptionStyle: TextStyle = MaterialTheme.typography.bodyMedium, iconTint: Color = MaterialTheme.colorScheme.onSurfaceVariant, contentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, iconContentDescription: String? = null, enabled: Boolean = true, iconContent: @Composable () -> Unit? = null, titleContent: @Composable () -> Unit? = null, descriptionContent: @Composable () -> Unit? = null, action: @Composable () -> Unit? = null)
A placeholder displayed when a list or content area has no data, presenting an optional icon, title, description, and an optional call-to-action.
Link copied to clipboard
fun StylishFormField(modifier: Modifier = Modifier, label: String? = null, required: Boolean = false, isError: Boolean = false, errorMessage: String? = null, supportingText: String? = null, labelStyle: TextStyle = MaterialTheme.typography.labelLarge, supportingTextStyle: TextStyle = MaterialTheme.typography.bodySmall, content: @Composable () -> Unit)
A labeled form field wrapper — the web "Field/Form" pattern from shadcn/ui and Ant Design.
Link copied to clipboard
fun StylishListItem(headline: String, supportingText: String? = null, modifier: Modifier = Modifier, onClick: () -> Unit? = null, onLongClick: () -> Unit? = null, enabled: Boolean = true, containerColor: Color = MaterialTheme.colorScheme.surface, contentColor: Color = MaterialTheme.colorScheme.onSurface, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.connectedCornerRadius), tonalElevation: Dp = 0.dp, headlineMaxLines: Int = Int.MAX_VALUE, headlineOverflow: TextOverflow = TextOverflow.Ellipsis, headlineStyle: TextStyle = MaterialTheme.typography.titleMedium, supportingTextMaxLines: Int = Int.MAX_VALUE, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextStyle: TextStyle = MaterialTheme.typography.bodyMedium, leadingContent: @Composable () -> Unit? = null, trailingContent: @Composable () -> Unit? = null, content: @Composable () -> Unit? = null)
A standalone list item for one row of information with optional interaction, tap/long-press actions, and leading/trailing slots.
Link copied to clipboard
fun StylishMasonry(itemCount: Int, modifier: Modifier = Modifier, columns: Int = 2, horizontalSpacing: Dp = StylishTheme.dimensions.itemSpacing, verticalSpacing: Dp = StylishTheme.dimensions.itemSpacing, content: @Composable ColumnScope.(index: Int) -> Unit)
A masonry layout — the web "Masonry" pattern from Ant Design and MUI.
Link copied to clipboard
fun StylishPagination(page: Int, onPageChange: (Int) -> Unit, modifier: Modifier = Modifier, pageCount: Int, siblingCount: Int = 1, boundaryCount: Int = 1, enabled: Boolean = true, shape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius), colors: ButtonColors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.onPrimary,
), unselectedColors: ButtonColors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.stylishComponentColors.groupedContainer,
contentColor = MaterialTheme.colorScheme.onSurface,
))
A pager control for long lists — the web "Pagination" pattern from shadcn/ui, MUI, and Ant Design.
Link copied to clipboard
fun StylishPopover(trigger: @Composable () -> Unit, content: @Composable () -> Unit, modifier: Modifier = Modifier, expanded: Boolean, onExpandedChange: (Boolean) -> Unit, placement: PopoverPlacement = PopoverPlacement.Bottom, offset: DpOffset = DpOffset(0.dp, 4.dp), containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, contentColor: Color = MaterialTheme.colorScheme.onSurface, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.floatingCornerRadius), border: BorderStroke? = BorderStroke(
StylishTheme.dimensions.outlineWidth,
MaterialTheme.colorScheme.outlineVariant,
), tonalElevation: Dp = 4.dp, shadowElevation: Dp = StylishTheme.dimensions.floatingElevation, width: Dp? = null, onDismissRequest: () -> Unit = { onExpandedChange(false) })
A popover — a click-triggered floating panel for rich content (forms, tables, filters, inline editing) — the MUI Popover / Radix Popover counterpart.
Link copied to clipboard
fun StylishPullToRefresh(isRefreshing: Boolean, onRefresh: () -> Unit, modifier: Modifier = Modifier, state: PullToRefreshState = rememberPullToRefreshState(), contentAlignment: Alignment = Alignment.TopStart, indicator: @Composable BoxScope.() -> Unit = {
PullToRefreshDefaults.Indicator(
modifier = Modifier.align(Alignment.TopCenter),
isRefreshing = isRefreshing,
state = state,
)
}, content: @Composable BoxScope.() -> Unit)
A pull-to-refresh container that wraps scrollable content and shows the Material 3 PullToRefreshDefaults.Indicator while a refresh is in progress.
Link copied to clipboard
fun StylishResult(title: String, modifier: Modifier = Modifier, variant: StylishResultVariant = StylishResultVariant.Info, description: String? = null, icon: @Composable () -> Unit? = null, titleStyle: TextStyle = MaterialTheme.typography.headlineSmall, descriptionStyle: TextStyle = MaterialTheme.typography.bodyMedium, contentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, iconSize: Dp = 64.dp, action: @Composable () -> Unit? = null)
A full status page — the web "Result" pattern from Ant Design.
Link copied to clipboard
fun StylishSection(title: String, supportingText: String? = null, modifier: Modifier = Modifier, spacing: Dp = StylishTheme.dimensions.contentSpacing, titleStyle: TextStyle = MaterialTheme.typography.titleMedium, titleColor: Color = MaterialTheme.colorScheme.primary, supportingTextStyle: TextStyle = MaterialTheme.typography.bodyMedium, supportingTextColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, horizontalAlignment: Alignment.Horizontal = Alignment.Start, content: @Composable ColumnScope.() -> Unit)
A titled section that groups a heading, optional supporting text, and arbitrary content under a consistent vertical rhythm (Sectioned structure).
Link copied to clipboard
fun StylishSkeletonAvatar(modifier: Modifier = Modifier, size: Dp = 48.dp, color: Color = MaterialTheme.colorScheme.surfaceVariant, animate: Boolean = true)
A circular shimmering placeholder representing an avatar or icon.
Link copied to clipboard
fun StylishSkeletonCard(modifier: Modifier = Modifier, color: Color = MaterialTheme.colorScheme.surfaceVariant, titleWidth: Dp = 160.dp, bodyWidth: Dp = 100.dp, bodyLineCount: Int = 1, animate: Boolean = true)
A card-shaped skeleton placeholder with an avatar, a title line, and one or more body lines, mimicking the layout of com.segnities007.stylishui.components.atoms.StylishConnectedCard.
Link copied to clipboard
Link copied to clipboard
fun StylishSnackbar(snackbarData: SnackbarData, modifier: Modifier = Modifier, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.connectedCornerRadius), containerColor: Color = MaterialTheme.colorScheme.inverseSurface, contentColor: Color = MaterialTheme.colorScheme.inverseOnSurface, actionColor: Color = MaterialTheme.colorScheme.inversePrimary)
A snackbar styled with the Stylish design language — rounded corners from StylishTheme.dimensions.connectedCornerRadius and theme-aware container/content colors.
fun StylishSnackbar(modifier: Modifier = Modifier, action: @Composable () -> Unit? = null, dismissAction: @Composable () -> Unit? = null, actionOnNewLine: Boolean = false, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.connectedCornerRadius), containerColor: Color = MaterialTheme.colorScheme.inverseSurface, contentColor: Color = MaterialTheme.colorScheme.inverseOnSurface, actionColor: Color = MaterialTheme.colorScheme.inversePrimary, content: @Composable () -> Unit)
A slot-based snackbar styled with the Stylish design language, for composing the message and action content directly instead of driving the snackbar from a SnackbarData. Carries the same styling as the SnackbarData overload: rounded corners from StylishTheme.dimensions.connectedCornerRadius and theme-aware container/content colors.
Link copied to clipboard
fun StylishSnackbarHost(hostState: SnackbarHostState, modifier: Modifier = Modifier, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.connectedCornerRadius), containerColor: Color = MaterialTheme.colorScheme.inverseSurface, contentColor: Color = MaterialTheme.colorScheme.inverseOnSurface, actionColor: Color = MaterialTheme.colorScheme.inversePrimary)
A SnackbarHost that renders each snackbar with StylishSnackbar. Place this inside a com.segnities007.stylishui.components.patterns.StylishScaffold's snackbarHost slot.
Link copied to clipboard
fun StylishSplitter(first: @Composable () -> Unit, second: @Composable () -> Unit, modifier: Modifier = Modifier, direction: StylishSplitterDirection = StylishSplitterDirection.Horizontal, ratio: Float = 0.5f, onRatioChange: (Float) -> Unit? = null, minRatio: Float = 0.1f, maxRatio: Float = 0.9f, handleSize: Dp = 8.dp, handleColor: Color = MaterialTheme.colorScheme.outlineVariant, handleActiveColor: Color = MaterialTheme.colorScheme.primary)
A draggable split panel — the web "Splitter/Resizable" pattern from Ant Design and Radix UI.
Link copied to clipboard
fun StylishStatistic(value: String, modifier: Modifier = Modifier, label: String = "", delta: String? = null, deltaPositive: Boolean = true, valueStyle: TextStyle = MaterialTheme.typography.headlineMedium, labelStyle: TextStyle = MaterialTheme.typography.bodySmall, deltaStyle: TextStyle = MaterialTheme.typography.bodySmall, deltaColor: Color = MaterialTheme.colorScheme.primary, contentColor: Color = MaterialTheme.colorScheme.onSurface, horizontalAlignment: Alignment.Horizontal = Alignment.Start)
A labeled metric display — the web "Statistic/Stat" pattern from Ant Design and Chakra UI.
Link copied to clipboard
fun StylishStepper(steps: List<String>, modifier: Modifier = Modifier, currentStep: Int = 0, completedSteps: Set<Int> = emptySet(), enabled: Boolean = true, onStepClick: (Int) -> Unit? = null, circleSize: Dp = 28.dp, connectorHeight: Dp = 2.dp, labelStyle: TextStyle = MaterialTheme.typography.labelMedium, completedColor: Color = MaterialTheme.colorScheme.primary, activeColor: Color = MaterialTheme.colorScheme.primary, inactiveColor: Color = MaterialTheme.colorScheme.surfaceVariant, contentColor: Color = MaterialTheme.colorScheme.onSurface)
A horizontal step indicator (the web "Stepper" pattern from MUI and Chakra UI).
Link copied to clipboard
fun StylishSwipeToDismissBox(state: SwipeToDismissBoxState, backgroundContent: @Composable RowScope.() -> Unit, modifier: Modifier = Modifier, enableDismissFromStartToEnd: Boolean = true, enableDismissFromEndToStart: Boolean = true, gesturesEnabled: Boolean = true, onDismiss: (SwipeToDismissBoxValue) -> Unit = {}, content: @Composable RowScope.() -> Unit)
A swipe-to-dismiss container that reveals backgroundContent as the user swipes content to either side, then settles or dismisses based on the swipe distance.
Link copied to clipboard
fun StylishTable(columns: List<String>, rows: List<List<String>>, modifier: Modifier = Modifier, containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, headerContainerColor: Color = MaterialTheme.colorScheme.surfaceContainerHighest, contentColor: Color = MaterialTheme.colorScheme.onSurface, headerTextStyle: TextStyle = MaterialTheme.typography.labelLarge, cellTextStyle: TextStyle = MaterialTheme.typography.bodyMedium, rowSpacing: Dp = 0.dp, cellPadding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 10.dp), shape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius))
A simple read-only data table — the web "Table" pattern from shadcn/ui and MUI.
Link copied to clipboard
fun StylishTimeline(items: List<StylishTimelineItem>, modifier: Modifier = Modifier, dotSize: Dp = 12.dp, lineColor: Color = MaterialTheme.colorScheme.outlineVariant, dotColor: Color = MaterialTheme.colorScheme.primary, contentStyle: TextStyle = MaterialTheme.typography.bodyMedium, titleStyle: TextStyle = MaterialTheme.typography.titleSmall)
A vertical list of chronological entries — the web "Timeline" pattern from Ant Design and MUI (lab).
Link copied to clipboard
fun StylishTimePicker(state: TimePickerState = rememberTimePickerState(), modifier: Modifier = Modifier, colors: TimePickerColors = TimePickerDefaults.colors(), layoutType: TimePickerLayoutType = TimePickerDefaults.layoutType())
A clock-and-input time picker for selecting a time of day, styled with the Stylish design language.
Link copied to clipboard
fun StylishTimePickerDialog(onDismissRequest: () -> Unit, confirmButton: @Composable () -> Unit, title: @Composable () -> Unit, modifier: Modifier = Modifier, properties: DialogProperties = DialogProperties(usePlatformDefaultWidth = false), modeToggleButton: @Composable () -> Unit? = null, dismissButton: @Composable () -> Unit? = null, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.connectedCornerRadius), containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, content: @Composable ColumnScope.() -> Unit)
A dialog hosting a StylishTimePicker, styled with the Stylish design language.
Link copied to clipboard
fun StylishToastHost(hostState: StylishToastHostState, modifier: Modifier = Modifier, shape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius), containerColor: Color = MaterialTheme.colorScheme.inverseSurface, contentColor: Color = MaterialTheme.colorScheme.inverseOnSurface)
A stackable toast display — the web "Toast/Message/Notification" pattern from shadcn/ui, Sonner, Ant Design, and Chakra UI.